<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('goodsPublish.发布商品')">
      <template #right>
        <el-button type="primary" @click="goBack" size="small">
          <SvgIcon name="iconfanhui" color="#fff" class="mr4" />{{ $t('goodsPublish.返回上级页面') }}
        </el-button>
      </template>
    </PageHeader>
    <div class="flex_aic_jcsb plateform_add_step mt10">
      <div
        class="flex_aic plateform_add_step_item"
        v-for="(item, index) in stepList"
        :class="`${releaseStore.step >= index ? 'active' : ''} ${
          index < stepList.length - 1 ? 'tailArrow' : ''
        } ${index > 0 ? 'heaArrow' : ''}`"
        @click="releaseStore.step = index"
      >
        <div class="flex_aic_jcc plateform_add_step_item_num font-600">
          {{ index + 1 }}
        </div>
        <div class="flex_column_center_start plateform_add_step_item_info">
          <div class="fs-18 font-600 lht-30">{{ item.label }}</div>
          <div class="fs-12 nowrap line-1 font-400 lht-20">
            {{ item.dic }}
          </div>
        </div>
      </div>
    </div>

    <releasestep1 v-if="releaseStore.step == 0" />
    <releasestep2 v-if="releaseStore.step == 1" />
    <releasestep3 v-if="releaseStore.step == 2" />
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import {releaseStore} from "./releaseStore";
import releasestep1 from "./components/releaseStep1.vue";
import releasestep2 from "./components/releaseStep2.vue";
import releasestep3 from "./components/releaseStep3.vue";
import { initDetailData, rest } from "./releaseStore";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const route = useRoute()
const router = useRouter()

const id = route.query.id
const stepList = [
  { label: t('goodsPublish.商品分类'), dic: t('goodsPublish.只有二级分类才能发布商品') },
  { label: t('goodsPublish.基本信息'), dic: t('goodsPublish.品牌信息以及筛选属性') },
  { label: t('goodsPublish.商品详情'), dic: t('goodsPublish.上传商品图片并完善商品详情') },
];

onMounted(()=>{
  initDetailData(id)
})
onUnmounted(()=>{
  rest()
})

const goBack = () => {
  router.back();
};
</script>
<style lang="scss" scoped>
.plateform_add_step {
  position: relative;
  height: 70px;
  color: #323233;
  font-size: 14px;
  line-height: 70px;
  .plateform_add_step_item {
    position: relative;
    flex-shrink: 0;
    width: 32.2%;
    padding: 0 10px;
    background-color: #eee;
    cursor: pointer;
    height: 100%;
    &.active {
      background: #ff9455;
      color: #ffffff;
      .plateform_add_step_item_num {
        border-color: #ffffff;
        color: #fff;
      }
      &.heaArrow {
        &::before {
          border-top: 35px solid #ff9455;
          border-bottom: 35px solid #ff9455;
        }
      }
      &.tailArrow {
        &::after {
          border-left: 14px solid #ff9455;
        }
      }
    }

    &.tailArrow {
      &::after {
        content: " ";
        display: block;
        position: absolute;
        top: 50%;
        right: -13px;
        width: 0;
        height: 0;
        margin-top: -35px;
        border-top: 36px solid transparent;
        border-bottom: 35px solid transparent;
        border-left: 14px solid #eee;
      }
    }
    &.heaArrow {
      &::before {
        content: " ";
        display: block;
        position: absolute;
        top: 50%;
        left: -13px;
        width: 0;
        height: 0;
        margin-top: -35px;
        border-top: 36px solid #eee;
        border-bottom: 35px solid #eee;
        border-left: 14px solid transparent;
      }
    }

    .plateform_add_step_item_num {
      flex-shrink: 0;
      width: 50px;
      height: 50px;
      margin-right: 10px;
      margin-left: 3px;
      border: 2px solid #666;
      border-radius: 50%;
      color: #333;
      font-size: 34px;
    }
  }
}
</style>
